<template>
  <div>
    <div class="left-nav" ref="menu">
      <ul>
        <li v-for='(item,index) in data' @click='navCl(index,$event)' :class="{current:flag ==index}" ref='csh'>
          <i></i>{{item.name}}
        </li>
      </ul>
    </div>
    <div class="goods" ref="foodsWrapper">
      <ul ref="goodlist">
        <li ref=0>
          {{data[0].name}}
        </li>
        <li class='listp' v-for='item in data[0].foods'>
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=1>
          {{data[1].name}}
        </li>
        <li class='listp' v-for='item in data[1].foods'>
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=2>
          {{data[2].name}}
        </li>
        <li class='listp' v-for='item in data[2].foods'>
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=3>
          {{data[3].name}}
        </li>
        <li class='listp' v-for='item in data[3].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=4>
          {{data[4].name}}
        </li>
        <li class='listp' v-for='item in data[4].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=5>
          {{data[5].name}}
        </li>
        <li class='listp' v-for='item in data[5].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=6>
          {{data[6].name}}
        </li>
        <li class='listp' v-for='item in data[6].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=7>
          {{data[7].name}}
        </li>
        <li class='listp' v-for='item in data[7].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
        <li ref=8>
          {{data[8].name}}
        </li>
        <li class='listp' v-for='item in data[8].foods' >
          <div class="icon">
            <img :src=item.icon alt="">
          </div>
          <div class="contentxt">
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p>月售{{item.sellCount}} 好评率{{item.rating}}%</p>
            <p>￥{{item.price}}</p>
          </div>
          <add :tips='much' ref='muc0' v-on:send="getdata"></add>
        </li>
      </ul>
    </div>
    <car :ti='money' :allNum='num' ref='cars'></car>
  </div>
</template>
<script>
  import car from './car.vue'
  import add from './add.vue'
  import BScroll from 'better-scroll'
import funParabola from '../assets/funParabola.js'
  export default {
    data() {
      return {
        data: {},
        // 判断类名添加类名
        flag: 0,

        transLY:[0,-999,-1127,-1241,-1554,-1768,-1981,-2295,-2809],
        // 保存所有单价价钱
        much: [],
        i: 0,
        num: 0,
        money: 0,
        // 购物车动画圆点
        target: 0,
        el: 0

      }
    },
    // 子组件
    components: {
      add,
      car,
    },
    created: function () {
      this.$http.get('http://localhost:8080/api/getGoods')
        .then(function (res) {
          if (res.body.status !== 0) {
            console.log(res.body.data)
            //  拿到数据赋值给data保存数据
            this.data = res.body.data
            // 拿到所有价钱存入数组
            for (var i = 0; i < res.body.data.length; i++) {
              for (var j = 0; j < res.body.data[i].foods.length; j++) {
                this.much.push(res.body.data[i].foods[j].price)
              }

            }




            this.$nextTick(() => { // 3 在这个函数中调用以防内容还未加载完就执行，获取不到元素的高度导致无法滑动
              this.warpHeight()
              this._initScroll()
              console.log(this.$refs.cars.$el.children[0].children[0].children[0])
              this.target = this.$refs.cars.$el.children[0].children[0].children[0];

              //  加索引id
              for (var i = 0; i < this.much.length; i++) {
                this.$refs.muc0[i].$el.id = i;
              }

              console.log(this.$refs.csh)

            })

          }

        })



    },
    
    methods: {
      // 拿到add组件的价格参数
      getdata: function (addMuch, num, yuan) {
        

        this.money += addMuch
        this.num += num
        this.el = yuan
         
        //   var myParabola = funParabola(this.el, this.target)
        //  myParabola.init()
  
       
      },
      // 左侧导航点击事件
      navCl: function (index, event) {
        // 给flag赋值当前索引，来判断是否添加删除类名
       this.flag = index;
    
        // 改变右侧对应的translateY的值
        if (!event._constructed) { //如果不存在这个属性,则不执行下面的函数
          return;
        }
        //  点击左侧滚动到对应的右侧元素
        this.foodsScroll.scrollToElement(this.$refs[index], 300)
        
         



      },

      // 计算高度滚动父元素的高度
      warpHeight: function () {
        var hei = screen.height - 255
        this.$refs.menu.style.height = hei + 'px'
        this.$refs.foodsWrapper.style.height = hei + 'px'
      },



      // 使用bscroll插件
      _initScroll() { // 2 函数声明

        this.menuScroll = new BScroll(this.$refs.menu, {
          // 被bsroll绑定的元素页面需要启动click事件才能出发移动端的点击事件
          click: true
        }) //注意此处是 this.$refs.xxx
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3

        })
        this.foodsScroll.on('scroll', (pos) => {
          // console.log(this.transLY[1])
          // console.log(pos.y)
          for (var i = 0; i < this.transLY.length; i++) {
            if (pos.y <= this.transLY[i]) this.flag = i
          }

        });


      }

    }
  }

</script>
<style scoped>
  .left-nav {
    /*height: 450px;*/
    background: #f3f5f7;
    float: left;
    overflow: hidden;
  }
  
  .left-nav ul {
    transform: translateY(10px)
  }
  
  .left-nav li {
    width: 80px;
    height: 60px;
    padding: 25px 15px 0 15px;
    box-sizing: border-box;
    vertical-align: middle;
  }
  
  .left-nav li.current {
    background: #fff;
  }
  
  .goods {
    /*height: 450px;*/
    overflow: hidden;
    background: #f3f5f7;
  }
  
  .goods .icon {
    float: left;
  }
  
  .goods .contentxt {
    float: left;
  }
  
  .goods .listp {
    box-sizing: border-box;
    /*padding: 20px 20px;*/
    padding: 0 20px 0 20px;
    background: #fff;
    overflow: hidden;
    height:100px;
   
  }
  
  .goods .listp img {
    width: 57px;
    margin-right: 10px;
  }
  
  .goods .listp h3 {
    color: #07111b;
    font-weight: normal;
  }
  
  .goods .listp p {
    font-size: 10px;
    color: #93999f;
    line-height: 10px;
  }
  
  .goods .listp p:last-of-type {
    color: red;
    font-weight: 900;
    font-size: 16px;
  }

</style>














<!--测试代码-->
<!--<template>
    <div>
        <ul>
            <li v-for='item in li' ref='abc'>123</li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      li:{},
      array:[{a:10},{b:20},{c:30},{d:40},{e:50}]
    }
  },
  created(){
     this.$http.get('http://localhost:8080/api/getGoods')
        .then(function(res){
          this.li=res.body.data
        })
        this.$nextTick(function(){
            console.log(this.$refs.abc) //也是undefined
        })
        
  }
}
</script>

<style scoped>

</style>-->